<template>
	<view>
		<view style="display: flex;flex-direction: column">
			<view style="display: flex;margin: 50rpx;margin-bottom: 35rpx;">
				<view style="width: 30%;">
					<text>身高</text>
				</view>
				<view style="width: 40%;text-align: center;">
					<input placeholder="请输入身高" v-model="cdHeight" />
				</view>
				<view style="width: 30%;text-align: right;">
					<text>cm</text>
				</view>
			</view>
			<view style="height: 1rpx;width: 100%;background-color: #bcbbc5;border-radius: 20rpx;" />

		</view>

		<!-- djklfsadl;jfkdsa -->
		<view style="display: flex;flex-direction: column">
			<view style="display: flex;margin: 50rpx;margin-bottom: 35rpx;">
				<view style="width: 30%;">
					<text>体重</text>
				</view>
				<view style="width: 40%;text-align: center;">
					<input placeholder="请输入体重" v-model="cdWeight" />
				</view>
				<view style="width: 30%;text-align: right;">
					<text>kg</text>
				</view>
			</view>
			<view style="height: 1rpx;width: 100%;background-color: #bcbbc5;border-radius: 20rpx;" />

		</view>

		<!-- djklfsadl;jfkdsa -->
		<view style="display: flex;flex-direction: column">
			<view style="display: flex;margin: 50rpx;margin-bottom: 35rpx;">
				<view style="width: 30%;">
					<text>日期</text>
				</view>
				<view style="width: 40%;text-align: center;">

					<view class="example-body">
						<uni-datetime-picker returnType="timestamp" v-model="single" @change="maskClick($event)" />
					</view>
				</view>

			</view>
			<view style="height: 1rpx;width: 100%;background-color: #bcbbc5;border-radius: 20rpx;" />

		</view>

		<view style="margin-top: 100rpx;">
			<button class="tianjia" @click="addHeightAndWeight()">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(option) {
			console.log("上个页面穿啊来的", option.childrenId)
			if (option.childrenId) {
				this.childrenId = option.childrenId
			} else {
				uni.redirectTo({
					url: "/pages/babyHeight/babyHeight"
				})
			}

		},
		data() {
			return {
				childrenId: null,
				cdHeight: 0,
				cdWeight: 0,
				single: '',
			}
		},
		methods: {
			addHeightAndWeight() {
				if (!this.cdHeight) {
					uni.showToast({
						title: "请输入身高",
						icon: 'error'
					})
				}
				if (!this.cdWeight) {
					uni.showToast({
						title: "请输入体重",
						icon: 'error'
					})
				}

				let heightInfo = {
					cdId: this.childrenId,
					cdHeight: this.cdHeight,
					recordTime: this.single
				}
				let weightInfo = {
					cdId: this.childrenId,
					cdWeight: this.cdWeight,
					recordTime: this.single
				}

				this.token = uni.getStorageSync("Authorization")
				uni.request({
					url: this.$serverUrl + '/api/height',
					method: 'POST',
					header: {
						'Authorization': this.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: heightInfo,
					success: (res) => {
						console.log("身高添加数据", res)
						if (res.statusCode == 200) {
							if (res.data.code == 1) {
								uni.request({
									url: this.$serverUrl + '/api/weight',
									method: 'POST',
									header: {
										'Authorization': this.token,
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									data: weightInfo,
									success: (res) => {
										console.log("体重添加数据", res)
										if (res.statusCode == 200) {
											if (res.data.code == 1) {
												uni.showToast({
													title: "添加成功",
													icon: 'success'
												})
												setTimeout(() => {
													uni.navigateBack()
												}, 1500)

											} else {
												console.log("error", res.data)
											}
										}
									},
									fail: (error) => {
										console.log("error", error)
									}
								})
							} else {
								console.log("error", res.data)
							}
						}
					},
					fail: (error) => {
						console.log("error", error)
					}
				})
			},
			maskClick(e) {
				console.log('maskClick事件:', e, this.single);
			}
		}
	}
</script>

<style>
	.demo-uni-row {
		margin-bottom: 10px;

	}

	.tianjia {
		color: white;
		background-color: #666ee8;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		margin-bottom: 50rpx;
	}
</style>
